import classNames from 'classnames'
import './index.scss'
import {useMemo, useState} from "react";
import {billTypeToName} from "@/contants/index.jsx";
import Icon from "@/components/icon/index.jsx";

const DailyBill = ({date, billList}) => {
    const result = useMemo(() => {
        const pay = billList.filter(item => item.type === 'pay').reduce((total, i) => total + i.money, 0)
        const income = billList.filter(item => item.type === 'income').reduce((total, i) => total + i.money, 0)
        return {
            pay,
            income,
            balance: income + pay
        }
    }, [billList]);

    // 控制展开收起
    const [show, setShow] = useState(false)


    return (
        <div className={classNames('dailyBill')}>
            <div className="header">
                <div className="dateIcon">
                    <span className="date">{date}</span>
                    <span className={classNames('arrow', show && 'expand')} onClick={() => setShow(!show)}></span>
                </div>
                <div className="oneLineOverview">
                    <div className="pay">
                        <span className="type">支出</span>
                        <span className="money">{result.pay.toFixed(2)}</span>
                    </div>
                    <div className="income">
                        <span className="type">收入</span>
                        <span className="money">{result.income.toFixed(2)}</span>
                    </div>
                    <div className="balance">
                        <span className="money">{result.balance.toFixed(2)}</span>
                        <span className="type">结余</span>
                    </div>
                </div>

            </div>
            {/* 单日列表 */}
            <div className="billList" style={{display: show? 'block' : 'none'}}>
                {billList.map(item => {
                    return (
                        <div className="bill" key={item.id}>
                            <Icon type={item.useFor} />
                            <div className="detail">
                                <div className="billType">{billTypeToName[item.useFor]}</div>
                            </div>
                            <div className={classNames('money', item.type)}>
                                {item.money.toFixed(2)}
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
export default DailyBill
